<script>
import {deleteComment, restoreComment, saveComment, updateComment} from "../../api/comment";
import {ElMessage} from "element-plus";

export default {
    name: "CommentItem",
    emits:['deleteItem'],
    data(){
        return{
            showInput:false,
            content:''
        }
    },
    props:{
        index:Number,
        value:Object
    },
    methods:{
        reply(){
            let param={
                resourceId:this.value.resourceId,
                flag:this.value.flag,
                parentId:this.value.id,
                questioner:this.value.replier,
                replier:this.user.userId,
                content:this.content
            }
            saveComment(param)
            .then(res=>{
                if(res.code===200)
                    ElMessage.success("回复成功")
                else ElMessage.error("回复失败")
                this.showInput=false
            })
        },
        deleteComment(){
            deleteComment(this.value.id)
            .then(res=>{
                if(res.code===200){
                    ElMessage.success('删除成功')
                    this.$emit("deleteItem",this.index)
                }
                else ElMessage.error("删除失败")
            })
        },
        restore(){
            restoreComment(this.value.id)
            .then(res=>{
                if(res.code===200){
                    ElMessage.success('恢复成功')
                    this.$emit("deleteItem",this.index)
                }

                else ElMessage.error("恢复失败")
            })
        }
    },
    computed:{
        user(){
            return this.$store.state.userInfo
        }
    }
}
</script>

<template>
    <div class="flex align-center row " style="height: 60px;width: 100%">
        <img :src="value.avatar" alt="" style="width: 40px;">
        <div class="flex column center" style="height: 100%;width:100% ">
            <div class="flex row" style="width: 100%">
                <el-tag effect="plain" type="success" size="small" style="width: fit-content">
                    {{ value.username }}:
                </el-tag>

                <span class="time-span">&emsp;{{value.createTime}}&emsp;回复
                    <router-link style="color: #42b983;text-decoration: underline" :to="value.flag? '/res/detail/'+value.resourceId : '/article/detail/'+value.resourceId ">你的文章</router-link></span>
            </div>
            <div class="flex row space-between" style="width: 100%">
                <span class="comment-content">{{ value.content }}</span>
                <div v-if="!value.deleted">
                    <el-button type="text" @click="showInput=!showInput" >回复</el-button>
                    <el-popconfirm
                        confirm-button-text="Yes"
                        cancel-button-text="No"
                        icon-color="red"
                        title="确定删除"
                        @confirm="deleteComment">
                        <template #reference>
                            <el-button type="text" style="color: red"  >删除</el-button>
                        </template>
                    </el-popconfirm>
                </div>
                <div v-if="value.deleted">
                    <el-button type="text" @click="restore" >恢复</el-button>
                </div>

            </div>
        </div>
    </div>
    <div v-if="showInput" class="flex row" style="margin-left: 3rem;margin-bottom: 1rem;margin-top: 1rem" >
        <el-input v-model="content" placeholder="输入回复"/><el-button @click="reply">提交</el-button>
    </div>
</template>

<style scoped>
.comment-content{
    font-weight: normal;
    margin-left: 2rem;
    font-size: 15px;
}
.time-span{
    font-weight: normal;
    font-size: 13px;
    color: #626971;
}
</style>
